/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Button, Badge, Radio, Tooltip, DatePicker, Descriptions, Tag, Icon as AIcon, Switch, message } from 'antd';
import { connect } from 'dva';
import forEach from 'lodash/forEach';
import request from '@/utils/request';
import { getTimeDistance } from '@/utils/utils';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react';
import ReactDataGrid from 'react-data-grid';
import find from 'lodash/find';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Vector } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import Feature from 'ol/Feature';
import { Icon, Style } from 'ol/style';
import Point from 'ol/geom/Point';
import { fromLonLat, toLonLat } from 'ol/proj';
import yali from './../../images/yali_blue.png';

const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      detail: {},
      totalVal: 0,
      showType: 1,
      historyData: [],
      showCustom: false,
      rangePickerValue: [moment(new Date().getFullYear() + '-' + (parseInt(new Date().getMonth()) + 1) + '-' + '01', 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')],
    };
  }

  componentDidMount() {
    const that = this;
    that.fetchDetail();
    that.fetch();

  }

  fetchDetail = () => {
    const that = this;
    request(`/pressure_sensors/${this.props.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
      }


    });
  };

  isActive(type) {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return false;
    }
    if (rangePickerValue[0].isSame(value[0], 'day') && rangePickerValue[1].isSame(value[1], 'day')) {
      return true;
    }
  }

  selectDate = (type) => {
    const that = this;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    }, function() {
      that.fetch();
    });
  };
  fetch = (cb) => {
    const that = this;
    request(`/pressure_analysis`, {
      method: 'GET',
      params: {
        pressure_sensor_id: this.props.id,
        start_date: that.state.rangePickerValue[0].format('YYYY-MM-DD'),
        end_date: that.state.rangePickerValue[1].format('YYYY-MM-DD'),
      },
    }).then((response) => {
      console.log(response);
      if (response.status === 200) {
        this.setState({
          historyData: response.data.data,
        });
      }

    });
  };
  handleRangePickerChange = (datePickerValue, type) => {
    const that = this;
    if (type === 'start') {
      this.setState({
        rangePickerValue: [datePickerValue, this.state.rangePickerValue[1]],
      }, function() {
        that.fetch();
      });
    } else {
      this.setState({
        rangePickerValue: [this.state.rangePickerValue[0], datePickerValue],
      }, function() {
        that.fetch();
      });
    }
  };
  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '充值时间',
        width: 150,
        key: 'upload_time',
      },
      {
        name: '充值金额',
        width: 120,
        key: 'sensor_status',
      },
      {
        name: '充值方式',
        width: 200,
        key: 'pressure',
      },
      {
        name: '充值水量',
        width: 180,
        key: 'pressure_status',
      },


    ].map(c => ({ ...defaultColumnProperties, ...c }));
    const { detail } = this.state;
    const reverceData = [...this.state.historyData].reverse();
    return (
      <div>
        <Descriptions column={4} title={<div>
          <span>户主基本信息</span>
        </div>} bordered>
          <Descriptions.Item label="户主姓名" span={2}> <Tooltip
            title={detail.name}>{detail.name}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="户主电话" span={2}> <Tooltip
            title={detail.name}>{detail.imei}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="户主编号"  span={2}>{detail.imsi}</Descriptions.Item>
          <Descriptions.Item label="水表编号"  span={2}>{detail.imsi}</Descriptions.Item>
          <Descriptions.Item label="安装地址" span={2}><Tooltip
            title={detail.address}>{detail.address}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="用水性质" span={2}>{detail.created_at}</Descriptions.Item>
          <Descriptions.Item label="水价" span={4}>{detail.description}</Descriptions.Item>
        </Descriptions>
        <h3 className={'ant-descriptions-title'} style={{ marginTop: '18px' }}>户主充值记录
        </h3>
        <div>
          <ButtonGroup>
            <Button onClick={() => this.selectDate('month')} type={this.isActive('month') ? 'primary' : ''}>本月</Button>
            <Button onClick={() => this.selectDate('year')} type={this.isActive('year') ? 'primary' : ''}>本年</Button>
          </ButtonGroup>

          <DatePicker
            value={this.state.rangePickerValue[0]}
            allowClear={false}
            format="YYYY-MM-DD"
            style={{ width: 150 }}
            placeholder={'开始日期'}
            onChange={(e) => this.handleRangePickerChange(e, 'start')}
          />
          <DatePicker
            allowClear={false}
            value={this.state.rangePickerValue[1]}
            format="YYYY-MM-DD"
            placeholder={'结束日期'}
            style={{ width: 150 }}
            onChange={(e) => this.handleRangePickerChange(e, 'end')}
          />
        </div>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => reverceData[i]}
          rowsCount={reverceData.length}
          minHeight={316}
        />

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
